<template>
  <div class="home images" id="viewerjs">
    <img alt="Vue logo" :src="item" v-for="(item,index) in imgList" :key="index" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const imgList = ref<string[]>([
            'https://namewjp.github.io/vue3-photo-preview/static/media/1.95c72610.jpg',
            'https://namewjp.github.io/vue3-photo-preview/static/media/1.95c72610.jpg',
            'https://namewjp.github.io/vue3-photo-preview/static/media/1.95c72610.jpg',
            'https://namewjp.github.io/vue3-photo-preview/static/media/1.95c72610.jpg',
            'https://namewjp.github.io/vue3-photo-preview/static/media/1.95c72610.jpg',
            'https://namewjp.github.io/vue3-photo-preview/static/media/1.95c72610.jpg',
            'https://namewjp.github.io/vue3-photo-preview/static/media/1.95c72610.jpg'
        ])
        onMounted(() => {
            // eslint-disable-next-line no-new
            new Viewer(document.getElementById('viewerjs') as HTMLElement, {
                navbar: true,
                title: true,
                toolbar: {
                    prev: true,
                    next: true
                }
            })
        })
        return {
            imgList
        }
    },
    methods: {},
    components: {
    }
})
</script>

<style lang="scss" scoped>
.cus_template {
  display: flex;
}
</style>
